// 为杭州商城订制的登录注册多语种页面
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Button, List, InputItem, Switch, Modal, ActivityIndicator, TextareaItem, Toast } from "antd-mobile";
import MToast from "../../components/Util/MToast"
import { routerRedux } from "dva/router";
import { createForm } from 'rc-form';
import {IntlProvider, addLocaleData,FormattedMessage} from 'react-intl';
import localeData from '../../../public/lang/data.json';
import { isNull } from "../../utils/helper";
import { VCODE } from "../../config/Config";
import md5 from "md5";
import "./Login.less";
import { getParmaFromUrl } from '../../utils/request';

@connect(() => {
	return ({})
})
@createForm()
export default class Register extends PureComponent {
	constructor(props) {
		super(props);
		this.timer = "";
		this.state = {
			username: "",
			password1: "",
			password2: "",
			email: "",
			showUsername: false,
			showPassword1: false,
			showPassword2: false,
			showEmail: false,
		}
	}

	componentWillMount() {
		let { dispatch, location } = this.props;
		dispatch({
			type: "global/setHeaderTitle",
			payload: {
				title: localeData[localStorage.locale].registerTitle,
				path: location.pathname + location.search
			}
		});
	}
	submit = () => {
		let { dispatch } = this.props;
		let { username, password1, password2, email } = this.state;
		if (isNull(username)) {
			Toast.info(localeData[localStorage.locale].loginUsername, 1.5, null, false);
			return;
		}
		if (username.length < 5) {
			Toast.info(localeData[localStorage.locale].registerUsername, 1.5, null, false);
			return;
		}
		if (isNull(password1)) {
			Toast.info(localeData[localStorage.locale].loginPassword, 1.5, null, false);
			return;
		}
		if (password1.length < 5) {
			Toast.info(localeData[localStorage.locale].registerPassword, 1.5, null, false);
			return;
		}
		if (isNull(password2)) {
			Toast.info(localeData[localStorage.locale].registerPassword1, 1.5, null, false);
			return;
		}
		if (password1 !== password2) {
			Toast.info(localeData[localStorage.locale].registerPassword2, 1.5, null, false);
			return;
		}
		if (isNull(email)) {
			Toast.info(localeData[localStorage.locale].registerEmail, 1.5, null, false);
			return;
		}
		dispatch({
			type: "login/register",
			payload: {
				username,
				password: md5(password1),
				email,
				AppID: MI_APP_CODE,
				callback: (res) => {
					let { data: { status } } = res;
					if (status === "success!") {
						Toast.info(localeData[localStorage.locale].registerSuccess, 1.5, null, false);
						setTimeout(() => {
							this.props.history.go(-1);
						}, 1600);
						// window.location.reload();
					}
					else if(status==="Username Repeat!"){
						Toast.info(localeData[localStorage.locale].registerSuccess1, 1.5, null, false);
					}
					else{
						Toast.info(localeData[localStorage.locale].registerFail, 1.5, null, false);
					}
				}
			}
		})
	}

	render() {
		let { username, password1, password2, email, showUsername, showPassword1, showPassword2, showEmail } = this.state;
    const messages = localeData[localStorage.locale];
		return (
      <IntlProvider
        locale={ localStorage.locale } messages={messages}
      >
			<div style={{ padding: "70px 20px 0px",background:"#fff",height:'100%' }} className="registerPage">
				{
					showUsername ?
            <div style={{border:'1px solid #EEEDF2',borderRadius:'5px',position:'relative',marginBottom:'25px',}}>
              <div style={{color:'#9C9BAB',fontSize:'11px',position:'absolute',top:'-19px',left:'23px',zIndex:'10',background:'#fff',padding:'8px'}}>{messages.loginUsername1}</div>
              <InputItem
                ref={e => this.usernameRef = e}
                onChange={(e) => {
                  this.setState({
                    username: e
                  })
                }}
                onBlur={(e) => {
                  console.log(e)
                  if (isNull(e)) {
                    this.setState({
                      showUsername: false
                    })
                  }
                }}
              ></InputItem>
            </div>
						:
						<div style={{ background: "#fff", padding: "15px", lineHeight: 1.2, color: "#bbb", fontSize: "17px" }}
							onClick={() => {
								this.setState({
									showUsername: true
								})
								setTimeout(() => {
									this.usernameRef.focus()
								}, 10);
							}}
						>{messages.registerUsername1}</div>
				}

				{
					showPassword1 ?
            <div style={{border:'1px solid #EEEDF2',borderRadius:'5px',position:'relative',marginBottom:'25px'}}>
              <div style={{color:'#9C9BAB',fontSize:'11px',position:'absolute',top:'-19px',left:'23px',zIndex:'10',background:'#fff',padding:'8px'}}>{messages.loginPassword1}</div>
              <InputItem
                type="password"
                ref={e => this.password1Ref = e}
                onChange={(e) => {
                  this.setState({
                    password1: e
                  })
                }}
                onBlur={(e) => {
                  console.log(e)
                  if (isNull(e)) {
                    this.setState({
                      showPassword1: false
                    })
                  }
                }}
              ></InputItem>
            </div>
						 :
						<div style={{ background: "#fff", padding: "15px", lineHeight: 1.2, color: "#bbb", fontSize: "17px" }}
							onClick={() => {
								this.setState({
									showPassword1: true
								})
								setTimeout(() => {
									this.password1Ref.focus()
								}, 10);
							}}
						>{messages.registerPassword3}</div>
				}

				{
					showPassword2 ?
            <div style={{border:'1px solid #EEEDF2',borderRadius:'5px',position:'relative',marginBottom:'25px'}}>
              <div style={{color:'#9C9BAB',fontSize:'11px',position:'absolute',top:'-19px',left:'23px',zIndex:'10',background:'#fff',padding:'8px'}}>{messages.loginPassword1}</div>
              <InputItem
                type="password"
                ref={e => this.password2Ref = e}
                onChange={(e) => {
                  this.setState({
                    password2: e
                  })
                }}
                onBlur={(e) => {
                  console.log(e)
                  if (isNull(e)) {
                    this.setState({
                      showPassword2: false
                    })
                  }
                }}
              ></InputItem>
            </div>
						:
						<div style={{ background: "#fff", padding: "15px", lineHeight: 1.2, color: "#bbb", fontSize: "17px" }}
							onClick={() => {
								this.setState({
									showPassword2: true
								})
								setTimeout(() => {
									this.password2Ref.focus()
								}, 10);
							}}
						>{messages.registerPassword1}</div>
				}


				{
					showEmail ?
            <div style={{border:'1px solid #EEEDF2',borderRadius:'5px',position:'relative',marginBottom:'25px'}}>
              <div style={{color:'#9C9BAB',fontSize:'11px',position:'absolute',top:'-19px',left:'23px',zIndex:'10',background:'#fff',padding:'8px'}}>{messages.registerEmail1}</div>
              <InputItem
                ref={e => this.emailRef = e}
                onChange={(e) => {
                  this.setState({
                    email: e
                  })
                }}
                onBlur={(e) => {
                  console.log(e)
                  if (isNull(e)) {
                    this.setState({
                      showEmail: false
                    })
                  }
                }}
              ></InputItem>
            </div>
						 :
						<div style={{ background: "#fff", padding: "15px", lineHeight: 1.2, color: "#bbb", fontSize: "17px" }}
							onClick={() => {
								this.setState({
									showEmail: true
								})
								setTimeout(() => {
									this.emailRef.focus()
								}, 10);
							}}
						>{messages.registerEmail}</div>
				}
				<Button type="primary" style={{ width: "90%", margin: "20px auto",background:'#F09600',borderRadius:'20px',border:'none',height:'42px',lineHeight:'42px' }} onClick={() => {
					this.submit()
				}}>{messages.registerButton}</Button>
			</div>
      </IntlProvider>
		)
	}
}
